<template>
  <div class="staff-manage">
    <el-card>
      <div class="desc-box">
        <div class="title">员工列表</div>
        <div class="desc">您可以对员工管理下的列表进行增删改查的操作，也可以为员工绑定不同的角色！</div>
      </div>
      <div class="use-box">
        <el-button class="add-button" type="primary" @click="openDialog(0)">添加员工</el-button>
        <div class="search-box">
          <div class="search-input">
            <el-input placeholder="请输入姓名" v-model="queryInfo.StaffName"
                      clearable @clear="getStaffsList"
            ></el-input>
          </div>
          <div class="search-input">
            <el-input
              placeholder="请输入电话" v-model="queryInfo.Phone"
              clearable @clear="getStaffsList"
            ></el-input>
          </div>
          <el-button class="search-button" type="primary" @click="getStaffsList">查询</el-button>
        </div>
      </div>
    </el-card>

    <el-card>
      <el-table
        border
        max-height="530px"
        :data="staffData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中......"
        :header-cell-style="{textAlign:'center'}"
        :cell-style="{textAlign:'center'}"
        :header-cell-class-name="setHeaderRowClassName"
      >
        <el-table-column type="index" fixed></el-table-column>
        <el-table-column prop="StaffName" label="员工姓名"></el-table-column>
        <el-table-column prop="Phone" label="电话号码"></el-table-column>
        <el-table-column prop="Position" label="员工职位"></el-table-column>
        <el-table-column prop="Image" label="员工头像">
          <el-image
            v-if="scope.row.Image"
            slot-scope="scope"
            :src="imageUrl+scope.row.Image"
            style="max-height: 100px; max-width: 100px"
            :preview-src-list="imageUrlList">
          </el-image>
        </el-table-column>
        <el-table-column label="启停状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.Status" :active-value="1"
                       :inactive-value="0" @change="statusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="openDialog(scope.row.ID)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteStaff(scope.row)">删除</el-button>
            <el-button type="warning" size="mini" @click="openSetRightsDialog(scope.row)">分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    分页组件-->
    <pagination :child-msg="queryInfo" @callFather="callFather"></pagination>
    <!--    新增和编辑按钮的对话框-->
    <add-and-edit-dialog
      v-if="isShowDialogComponent"
      :title="title"
      @handleClose="handleClose"
      :isShowDialogComponent="isShowDialogComponent"
      :judge-id="judgeId"
    ></add-and-edit-dialog>
<!--   分配角色对话框-->
    <set-role-dialog
      v-if="setRightDialogVisible"
      :set-right-dialog-visible="setRightDialogVisible"
      :row-info-id="rowInfoId"
      @handleSetRoleClose="handleSetRoleClose"
      :row-info="rowInfo"
    ></set-role-dialog>

  </div>
</template>

<script>
//导入网络封装的类
import StaffManage from '../../model/staffManage'
//导入对话框组件
import AddAndEditDialog from './childComps/AddAndEditDialog'
import SetRoleDialog from './childComps/SetRoleDialog'
//分页组件
import Pagination from '../../components/base/pagination/Pagination'

export default {
  name: 'StaffManage',
  components: {
    AddAndEditDialog,
    Pagination,
    SetRoleDialog
  },
  data () {
    return {
      loading: false,
      //保存员工列表中的内容
      staffData: [],
      //查询列表需要传入的参数
      queryInfo: {
        Phone: '',
        StaffName: '',
        Page: 1,
        Limit: 10,
        total: 0
      },
      judgeId: 0,
      //控制分配权限对话框的显示与隐藏
      setRightDialogVisible: false,
      //被点击的某一条员工的信息
      rowInfoId: '',
      //给分配角色组件传值
      rowInfo:{},
      //控制对话框组件的显示与隐藏
      isShowDialogComponent: false,
      //控制对话框的提示内容
      title: '',
      //为了在表格中显示用户头像而去拼接的url
      imageUrl: '',
      //用于头像的大图预览功能
      imageUrlList: [],

    }
  },
  created () {
    this.getStaffsList()
  },
  methods: {
    callFather (value) {
      if (value.currentPage) this.queryInfo.Page = value.currentPage
      if (value.pageSize) this.queryInfo.Limit = value.pageSize
      this.getStaffsList()
    },
    //设置绑定学科的表头样式
    setHeaderRowClassName ({ rowIndex }) {
      if (rowIndex === 0) {
        return 'setHeaderSubjectColumnName'
      }
    },
    //添加、编辑
    handleClose (payload) {
      if(payload==='submitButton'){
        this.getStaffsList()
      }
      this.isShowDialogComponent = false

    },
    //分配角色
    handleSetRoleClose(payload){
      if(payload==='submitButton'){
        this.getStaffsList()
      }
      this.setRightDialogVisible=false
    },

    //获取员工列表
    async getStaffsList () {
      try {
        this.loading = true
        const res = await StaffManage.getStaffsList(this.queryInfo)
        this.loading = false
        this.staffData = res.ListData
        this.imageUrl = res.ImageUrl
        this.queryInfo.total = res.Total
        this.initImageUrlList()
      } catch (err) {
        this.loading = false
      }
    },
    //点击添加员工按钮触发
    openDialog (id) {
      this.isShowDialogComponent = true
      this.title = id === 0 ? '添加员工' : '编辑员工'
      this.judgeId = id === 0 ? 0 : id
    },
    //头像大图预览功能的初始化
    initImageUrlList () {
      this.staffData.forEach(item => {
        if (!item.Image) {}
          else {
          this.imageUrlList.push(this.imageUrl + item.Image)
        }
      })
    },
    //启停状态发生改变时候触发
    async statusChange (rowInfo) {
      await StaffManage.statusChange(rowInfo.ID, rowInfo.Status)
      await this.getStaffsList()
      this.$message.success('修改状态成功')
    },

    async deleteStaff (rowInfo) {
      const confirmResult = await this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除该员工')
      } else {
        StaffManage.deleteStaffsInfo(rowInfo.ID)
        this.$message.success('成功删除该员工')
        await this.getStaffsList()
      }
    },
    //打开分配角色对话框
    openSetRightsDialog (rowInfo) {
      this.setRightDialogVisible = true
      this.rowInfoId = rowInfo.ID
      this.rowInfo=rowInfo
    },
  }
}
</script>

<style scoped>
@import "../../../src/assets/style/realize/tableStyle.css";
.staff-manage {
  background-color: #eee;
}
.el-pagination {
  position: absolute;
  right: 0;
  padding: 30px;
}
.el-card {
  margin-top: 20px;
  box-shadow: none;
}
/*给表头一行加背景颜色*/
/deep/ .setHeaderSubjectColumnName {
  background-color: #E6E6FA !important;
  opacity: 0.7 !important;
}

</style>
